<template>
    <div class="mac-window">
        <div class="title-bar">
            <div class="buttons">
                <span class="button close"></span>
                <span class="button minimize"></span>
                <span class="button zoom"></span>
            </div>
            <h1>&nbsp;&nbsp;&nbsp;&nbsp;HikerSystem</h1>
        </div>
        <div style="display: flex;">
          <div class="scrollable-sidebar">
            
            <br/>
            <p style="margin: 20px 3px 15px 3px;" >
                <router-link :to="'/home?UID=' + this.$route.query.UID" class="a"><img src="..\assets\backspace.png" width="12" height="12"/>返回主页</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex ;background-color: gray; border-radius: 0;" >
                <router-link :to="'/create_team?UID=' + this.$route.query.UID" class="a" style="color:aliceblue"><img src="..\assets\mine.png" width="12" height="12"/>创建队伍</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/join_team?UID=' + this.$route.query.UID" class="a"><img src="..\assets\new.png" width="12" height="12"/>加入队伍</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/application?UID=' + this.$route.query.UID" class="a"><img src="..\assets\documents.png" width="12" height="12"/>管理申请</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/account?UID=' + this.$route.query.UID" class="a"><img src="..\assets\documents.png" width="12" height="12"/>我的信息</router-link>
            </p>
          </div>
          

    

          <div class="main-sidebar" style="display: grid; grid-template-columns: 1fr 1fr;">
            <div class="left-half">
            <br/><img src="../assets/yonghuliebiao.png" width=90 />
            <div style="margin: 20px 3px 15px 3px; display: flex" v-for="user in userList.data" :key="index" >
              <p v-if="user.id != this.$route.query.UID">
                <p style="width: 18vw; margin: 3px;">{{ user.username }}</p>
                <input type="checkbox" :value="user.id" v-model="selectedUserIds" @change="handleCheckboxChange"/>
              </p>
            </div>
            </div>
            <form @submit.prevent="handleSubmit">
              
              
      



                <div>
                    <select id="maxcount" v-model="maxcount">
                        <option value="" disabled selected>最大人数</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                    <select id="hobby" v-model="hobby">
                        <option value="" disabled selected>爱好偏向</option>
                        <option value="Photography">摄影达人</option>
                        <option value="Extreme">极限玩家</option>
                        <option value="Draw">山水入画</option>
                        <option value="Hiker">闲适远足</option>
                    </select>
                </div>
                <div>
                    <input type="text" id="purpose" v-model="purpose" required placeholder="请输入目的地" class="input">
                </div>
                
                <div>
                    <textarea id="details" v-model="details" required placeholder="请输入队伍名" class="input"/>
                </div>
                    <button type="submit">创建队伍</button>
            </form>
          </div>
        </div>
    </div>
</template>




<script>
const IP = 'http://47.113.197.249:8083';



import { ref } from 'vue';
import axios from 'axios';
import '../assets/mac.css';
import { useRoute } from 'vue-router';

//TODO
//刚进入的时候把用户列表获取并显示了
//信息输入
//信息发送
//失败处理
//成功处理

export default {
  name: 'CreateTeam',
  

  setup() {
    const route = useRoute();
    const maxcount = ref('');
    const hobby = ref('');
    const purpose = ref('');
    const details = ref('');
    const selectedUserIds = ref([]);

    const handleSubmit = () => {
      const teamData = {
        max_members: maxcount.value,
        // hobby: hobby.value,
        destination: purpose.value,
        name: details.value,  //***************************************** */
      };
      const userData = {
        id: route.query.UID,
      }
      const totalData = {
        user: userData,
        team: teamData,
        idlist: selectedUserIds.value,
      }
      console.log('Team Data', totalData);
      axios.post(IP + '/user/createTeam', totalData)
        .then(response => {
          console.log(response.data);
          alert(response.data.msg);
        })
        .catch(error => {
          console.log('发送出错：', error);
          alert('连接失败！请检查网络');
        });
    };
    return {
      maxcount,
      hobby,
      purpose,
      details,
      handleSubmit,
      selectedUserIds,
    }
  },
  
  data() {
    return {
      userList:{},
    }
  },


  mounted() {
    axios.get(IP + '/user/getUserList')
        // 获取用户列表userList
      .then(response => {
        console.log('UserList:' + response.data.msg);
        this.userList = response.data;
      })
      .catch(error => {
        // 获取失败
        console.error('获取数据失败:', error);
      });

  },
  methods: {
    handleCheckboxChange() {
      console.log(this.selectedUserIds); // 选中的用户id
      if (this.selectedUserIds.length > this.maxcount - 1){
        alert('选中用户已满！');
        this.selectedUserIds.pop();
      }
    }
  }
  
};
</script>

<style>
body {
    margin: 0;
    padding: 0;
    font-family: 'San Francisco', 'Helvetica Neue', Arial, sans-serif;
    background-color: #F9F9F9;
}









</style>